<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转换为js -->
    <script src="../js/babel.min.js"></script>



    <script type="text/babel">
        let that; //强行定义一个that（不能用const定义，就变成只读了）

        //1、创建类式组件
        class Weather extends React.Component {
            constructor(props) { //构造器一定要传入props
                super(props); //这个props给super用
                this.state = { isHot: false }; //修改state
                that = this; //强行把this(Weather实例)给that
            }
            render() {
                return (
                    <div>
                        <div onClick={demo}> 调用外部方法demo1 {this.state.isHot ? '炎热' : '寒冷'}</div>
                        <div onClick={this.demo2}> 调用类的方法demo2 </div>
                    </div>
                )
            }
            //类中方法
            demo2() {
                //通过类的实例调用方法时，方法中的this就是类的实例对象
                console.log("3点击了，看看类中方法直接调用的this：", this)
            }
        }

        //2、渲染虚拟dom
        ReactDOM.render(<Weather />, document.getElementById('test'));

        //外部方法
        function demo() {
            console.log("1点击了，看看外部方法直接调用的this：", this)
            console.log("2点击了，看看外部方法强行调用的that：", that)
        }

    </script>
</body>

</html>